<template>
  <div class="title">
    <span>{{ title }}</span>
    <span class="title-right"><van-icon name="ellipsis" @click="handleClick" v-if="hasOperation" size="28px"/></span>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    hasOperation: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('navclick')
    }
  }
}
</script>

<style lang="less" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: @padding;
    background: #fff;
    font-size: @global-font-size-title;
    span {
      display: inline-block;
      height: 22px;
      line-height: 22px;
      padding: 5px 10px 0 0;
      border-radius: 2px;
      width: 100%;
      background: @background-color;
    }
    &-right {
      text-align: right;
    }
  }
</style>